<template>
  <div class="car_styl">
    <div class="title_styl">
      <div class="title_left">
        <Lines class="line_styl" backColor="#2973E4" widthNum="6px" heightNum="30px"></Lines>
        <div class="title_name">我的车辆</div>
      </div>
      <!-- <div class="title_right">
        <div class="btn_addcar" @click="carInfoFun('add')">+ 新增车辆</div>
      </div> -->
    </div>
    <!-- 筛选 -->
    <div class="time_choose">
      <Form ref="formEle" :footer-hide="true" :model="searchData" :label-width="80">
        <Row>
          <Col span="8">
          <FormItem label="是否常用">
            <Select v-model="searchData.inCommonUse" style="text-align: start;">
              <Option :value="1">常用</Option>
              <Option :value="0">不常用</Option>
            </Select>
          </FormItem>
          </Col>
          <Col span="8">
          <FormItem label="车牌号">
            <Input v-model="searchData.carNo" placeholder="请输入车牌号"></Input>
          </FormItem>
          </Col>
          <Col span="8">
          <div class="btn_box">
            <div class="btn_search" @click="handleSubmit">搜索</div>
            <div class="btn_reset" @click="handleReset">重置</div>
          </div>
          </Col>
        </Row>
      </Form>
      <div class="add_btn">

        <Button type="success" @click="carInfoFun('add')">+ 新增车辆</Button>
      </div>
    </div>
    <!--列表  -->
    <Table stripe :height="556" :columns="columns1" :data="dataList">
      <template slot-scope="{ row }" slot="inCommonUse">
        <Tag color="success" v-if="row.inCommonUse == 1">常用</Tag>
        <Tag color="default" v-else>不常用</Tag>
      </template>
      <template slot-scope="{ row }" slot="action">
        <a @click="carInfoFun('edit',row)">编辑</a>
        <Divider type="vertical" />
        <a style="color: red;" @click="deleteCarFun({id:row.id},'删除','API_deleteCar')">删除</a>
      </template>
    </Table>
    <!-- 分页 -->
    <div class="page_styl">
      <Page v-if="dataList.length != 0" :page-size="pageSize" :total="total" @on-change="changePageFun" show-total />
    </div>

    <!-- 车辆信息弹窗 -->
    <Modal ref="modalEle" v-model="modalShow" width="500" class="modal-styl" :mask-closable="false">
      <p slot="header" style="text-align: center">
        <span>车辆信息</span>
      </p>
      <Form ref="formEle" :footer-hide="true" :model="addFather" :rules="ruleValidate" :label-width="130">
        <FormItem label="车牌号" prop="carNo">
          <Input v-model="addFather.carNo" placeholder="请输入车牌号"></Input>
        </FormItem>
        <FormItem label="司机姓名" prop="driverName">
          <Input v-model="addFather.driverName" placeholder="请输入司机姓名"></Input>
        </FormItem>
        <FormItem label="司机身份证号" prop="driverCard">
          <Input v-model="addFather.driverCard" placeholder="请输入身份证号"></Input>
        </FormItem>
        <FormItem label="手机号码" prop="driverPhone">
          <Input v-model="addFather.driverPhone" placeholder="请输入手机号码"></Input>
        </FormItem>
        <FormItem label="押运员姓名" prop="supercargoName">
          <Input v-model="addFather.supercargoName" placeholder="请输入司机姓名"></Input>
        </FormItem>
        <FormItem label="押运员身份证号" prop="supercargoCard">
          <Input v-model="addFather.supercargoCard" placeholder="请输入身份证号"></Input>
        </FormItem>
        <FormItem label="押运员手机号" prop="supercargoPhone">
          <Input v-model="addFather.supercargoPhone" placeholder="请输入手机号码"></Input>
        </FormItem>

        <FormItem label="常用车辆">
          <i-switch v-model="addFather.inCommonUse" true-value="1" false-value="0" size="large">
            <span slot="open">是</span>
            <span slot="close">否</span>
          </i-switch>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="modalShow = false">取消</Button>
        <Button type="primary" @click="submitFun" :loading="btnLoading">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import {
  validateIdCard,
  validatePhone,
  validateCarNo
} from "@/tool/myValidator";

export default {
  components: {},
  data() {
    return {
      pageSize: 10,
      total: 0,
      searchData: {},
      modalShow: false,
      btnLoading: false,
      handleType: "",
      addFather: {},
      ruleValidate: {
        driverName: [
          {
            required: true,
            message: "请输入司机姓名",
            type: "string",
            trigger: "blur"
          }
        ],
        driverCard: [{ required: true, validator: validateIdCard }],
        driverPhone: [{ required: true, validator: validatePhone }],
        carNo: [{ required: true, validator: validateCarNo }]
      },
      columns1: [
        {
          title: "常用车辆",
          key: "inCommonUse",
          slot: "inCommonUse",
          align: "center",
          width: 100
        },
        {
          title: "车牌号",
          key: "carNo",
          align: "center",
          width: 100
        },
        {
          title: "司机姓名",
          key: "driverName",
          align: "center",
          width: 100
        },
        {
          title: "司机身份证号",
          key: "driverCard",
          align: "center",
          width: 180
        },
        {
          title: "司机手机号",
          key: "driverPhone",
          align: "center",
          width: 130
        },
        {
          title: "押运员姓名",
          key: "supercargoName",
          align: "center",
          width: 110
        },
        {
          title: "押运员身份证号",
          key: "supercargoCard",
          align: "center",
          width: 180
        },
        {
          title: "押运员手机号",
          key: "supercargoPhone",
          align: "center",
          width: 130
        },
        {
          title: "操作",
          slot: "action",
          align: "center",
          fixed: "right",
          width: 130
        }
      ],
      dataList: []
    };
  },
  mounted() {
    this.getCarList();
  },
  methods: {
    // 提交车辆信息
    submitFun() {
      let data = {
        ...this.addFather
      };
      let apiName = this.handleType == "add" ? "API_addCar" : "API_editCar";
      this.btnLoading = true;
      this.$refs.formEle.validate((valid) => {
        if (valid) {
          this.httpPost(this.API[apiName], data)
            .then((res) => {
              this.$Message.success("提交成功!");
              this.btnLoading = false;
              this.modalShow = false;
              this.getCarList();
            })
            .catch((err) => {
              this.btnLoading = false;
              console.error(err);
            });
        } else {
          this.$Message.error("请输入必填信息!");
          this.btnLoading = false;
        }
      });
    },
    // 车辆信息编辑框
    carInfoFun(flag, data) {
      this.handleType = flag;
      if (flag == "edit") {
        this.addFather = {
          ...data
          // id: data.id,
          // driverName: data.driverName,
          // driverPhone: data.driverPhone,
          // driverCard: data.driverCard,
          // carNo: data.carNo,
          // inCommonUse: data.inCommonUse
        };
      } else {
        // flag == "add"
        this.addFather = {
          // driverName: "",
          // driverPhone: "",
          // driverCard: "",
          // carNo: "",
          inCommonUse: "0",
          customerId: this.$store.getters.store_userInfo.id
        };
      }
      this.$refs.formEle.resetFields();
      this.modalShow = true;
    },
    // 车辆列表
    getCarList(data) {
      this.httpGet(this.API.API_carList, {
        pageSize: this.pageSize,
        ...data,
        customerId: this.$store.getters.store_userInfo.id
      })
        .then((res) => {
          this.dataList = res.data.rows;
          this.total = res.data.totalRows;
        })
        .catch((err) => {
          console.error("接口报错:", err);
        });
    },
    // 删除车辆
    deleteCarFun(data, titleCon = "拉黑", ApiName) {
      if (!ApiName) return;
      this.$Modal.confirm({
        title: titleCon + "确认",
        content: "确认要" + titleCon + "?",
        loading: true,
        onOk: () => {
          this.httpPost(this.API[ApiName], data)
            .then((res) => {
              this.$Message.success(titleCon + "成功!");
              this.$Modal.remove();
              this.getCarList();
            })
            .catch((err) => {
              this.$Modal.remove();
            });
        }
      });
    },
    //搜索
    handleSubmit() {
      this.getCarList({ ...this.searchData, pageNo: 1 });
    },
    //重置
    handleReset() {
      this.searchData = {};
      this.getCarList();
    },
    //点击分页
    changePageFun(event) {
      this.getCarList({ pageNo: event });
    }
  }
};
</script>
<style lang="less" scoped>
@import "~@/assets/styles/main.less";
@deep: ~">>>";

::v-deep .ivu-modal-header {
  background-image: url("~@/assets/images/modal_back500.png") !important;
}

//筛选
.time_choose {
  background-color: #fff;
  .add_btn {
    display: flex;
    justify-content: flex-start;
    margin-left: 20px;
    padding-bottom: 10px;
  }
}
.btn_box {
  display: flex;
  justify-content: flex-end;
  margin-right: 10px;
  .btn_search {
    .flex-x(center);
    width: 70px;
    padding: 4px 10px;
    margin-left: 10px;
    border-radius: 4px;
    color: #ffffff;
    background-color: @themeColor;
    cursor: pointer;
  }
  .btn_reset {
    .flex-x(center);
    width: 70px;
    padding: 4px 10px;
    margin-left: 10px;
    color: #333333;
    border-radius: 4px;
    border: 1px solid #dcdee2;
    background-color: #ffffff;
    cursor: pointer;
  }
}

//
.car_styl {
  width: 100%;
  .title_styl {
    .flex-x();
    padding: 8px 10px 10px 0;
    background-color: #ffffff;

    .title_left {
      .flex-x(flex-start);
      .title_name {
        margin-left: 17px;
        font-size: 16px;
        font-weight: bold;
      }
      .title_desc {
        margin-left: 20px;
        font-size: 12px;
        color: #999999;
      }
    }
    .title_right {
      .solid-btn(104px, 32px, 0, @themeColor, #ffffff);
      border-radius: 4px;
    }
  }
  .page_styl {
    margin-top: 10px;
    width: 100%;
    text-align: right;
  }
}
</style>
